<template>
  <view style="padding: 0 30prx">
    <view class="margin-10" style="margin-bottom: 20rpx !important">
      <view class="three" v-if="asData.parameters.arrangement === 1 || asData.parameters.arrangement === 3 || asData.parameters.arrangement === 4">
        <view
          v-for="(item, index) in asData.parameters.list"
          @click="Go(item.linkValue, item.linkName)"
          :key="index"
          :style="{
            height: asData.parameters.arrangement === 1 ? '375rpx' : asData.parameters.arrangement === 3 ? '248rpx' : '187.5rpx',
            width: asData.parameters.arrangement === 1 ? '50%' : asData.parameters.arrangement === 3 ? '33%' : '50%'
          }"
          :class="{ four: asData.parameters.arrangement === 4 }"
        >
          <image :src="item.image" style="width: 100%; height: 100%"></image>
        </view>
      </view>

      <view class="two" v-else>
        <view class="left">
          <image
            v-if="asData.parameters.list[0].image"
            :src="asData.parameters.list[0].image"
            @click="Go(asData.parameters.list[0].linkValue, asData.parameters.list[0].linkName)"
            style="width: 100%; height: 100%"
          ></image>
        </view>
        <view class="right">
          <view>
            <image
              v-if="asData.parameters.list[1].image"
              :src="asData.parameters.list[1].image"
              @click="Go(asData.parameters.list[1].linkValue, asData.parameters.list[1].linkName)"
              style="width: 100%; height: 100%"
            ></image>
          </view>
          <view>
            <image
              :src="asData.parameters.list[2].image"
              v-if="asData.parameters.list[2].image"
              @click="Go(asData.parameters.list[2].linkValue, asData.parameters.list[2].linkName)"
              style="width: 100%; height: 100%"
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  name: 'ImgWindow',
  props: {
    asData: {
      // type: Object,
      required: true
    }
  },
  data() {
    return {
      height: 0
    };
  },
  created() {
    // console.log(this.asData);
  },
  onLoad() {},
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapMutations(['SET_CLASSTYPE', 'SET_ADDRESS']),
    // 跳转页面
    Go(url, sort) {
      console.log(url);
      // 跳转页面携带参数
      if (url) {
        if (sort === 3) {
          uni.navigateTo({
            url
          });
        } else if (sort === 2) {
          this.SET_CLASSTYPE(sort);
          uni.switchTab({
            url
          });
          this.SET_ADDRESS({
            num: 2
          });
        } else if (sort === 4) {
          if (this.userInfo.id) {
            uni.navigateTo({
              url
            });
          } else {
            uni.navigateTo({
              url: '/pages/login/login'
            });
          }
        } else {
          this.SET_CLASSTYPE(sort);
          uni.switchTab({
            url
          });
          this.SET_ADDRESS({
            num: 1
          });
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.three {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
}
.four {
  border-radius: 10rpx;
  overflow: hidden;
  // border: 1px solid #d7d7d7;
}

.two {
  display: flex;
  justify-content: space-between;

  & > view {
    height: 375rpx;
    width: 49.5%;
  }
  .left {
    border-radius: 15rpx;
    overflow: hidden;
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & > view {
      height: 49%;
      overflow: hidden;
      border-radius: 15rpx;
    }
  }
}
</style>
